@extends('admin.layout.app')

@section('title')
    我的评分
@endsection

@section('style')
    <link href="https://cdn.bootcss.com/smalot-bootstrap-datetimepicker/2.4.4/css/bootstrap-datetimepicker.css" rel="stylesheet">
@endsection

@section('content') 
	@component('admin.components.nav') 
	@endcomponent
<!--main-->
<main v-cloak>
    <div class="container">
        <div class="breadcrumb">
            <div class="row">
                <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
                    <h3>我的评分</h3>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
                    <form action="" class="form-inline form-search">
                        <div class="form-group has-feedback">
                            <label class="sr-only" for="search-input">搜索</label>
                            <div class="input-group">
                                <input id="search-input" type="search" class="form-control" placeholder="请选择年份" readonly v-model="keywords">
                                <span v-if="keywords" class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true" @click="clearDate"></span>
                            </div>
                        </div>
                        <button type="button" class="btn btn-primary btn-search" @click="search">搜索</button>
                    </form>
                </div>
            </div>
        </div>
        <div class="data-table table-responsive">
            <table class="table table-striped table-hover">
                <thead>
                    <tr>
                        <th>编号</th>
                        <th>名称</th>
                        <th>综合评分</th>
                        {{-- <th>评分等级</th> --}}
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(item,index) in list">
                        <th scope="row">@{{item.year_id}}</th>
                        <td>四川省大件公路管理处职工@{{item.year_number}}年度考核民主评议</td>
                        <td>@{{item.value}}</td>
                        {{-- <td>@{{item.level}}</td> --}}
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="action-panel">
            <div class="row">
                <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
                    <a :href="'/user_scores_export?user_id='+user_id" class="btn btn-primary" target="_blank">导出</a>
                </div>
                <div class="col-xs-12 col-sm-8 col-md-8 col-lg-8">
                    <span>共@{{total}}条</span>
                    <span>@{{current_page}}/@{{last_page}}页</span>
                    <nav class="nav-pager" aria-label="...">
                      <ul class="pager">
                        <li :class="{disabled:current_page<=1}"><a :disabled="current_page<=1" @click="pageTurn(-1)"><span class="glyphicon glyphicon-menu-left" aria-hidden="true"></span></a></li>
                        <li :class="{disabled:current_page>=last_page}"><a :disabled="current_page>=last_page" @click="pageTurn(1)"><span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span></a></li>
                      </ul>
                    </nav>
                    <form action="" class="form-inline form-pager">
                        <div class="form-group">
                            <label for="page-number">跳转到</label>
                            <input type="number" id="page-number" class="form-control" placeholder="" v-model="turn_page">
                        </div>
                        <button type="button" class="btn btn-primary btn-goto" :disabled="!turn_page || turn_page>last_page" @click="toPage">GO</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</main>
@endsection

@section('script')
    <script src="https://cdn.bootcss.com/smalot-bootstrap-datetimepicker/2.4.4/js/bootstrap-datetimepicker.js"></script>
    <script src="https://cdn.bootcss.com/smalot-bootstrap-datetimepicker/2.4.4/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
    <script type="text/javascript">
        var activeIndex = 5
    </script>
    <script src="/admin/js/nav.js" type="text/javascript"></script>
    <script src="/admin/js/grade.js" type="text/javascript"></script>
@endsection